<template>
	<view class="pageWrapper-rich">
		<!-- 顶部tab滑动区域 -->
		<view class="topTabs-rich">
			<v-tabs lineHeight="6rpx" :lineScale="0.4" paddingItem="0 24rpx" lineColor="#f35111" :bold="true"
				v-model="activeTab" field="text" :tabs="tabList" @change="changeTab"></v-tabs>
		</view>

		<!-- 支付押金的入口 -->
		<!--  v-if="isShowgDepositBtnStart && isHasOrderSta09" -->
		<view @click="goPayDeposit" v-if="isShowgDepositBtnStart"
			style="background-color: #afd6ff;display: flex;align-items: center;width: max-content;border: 2rpx solid #afd6ff;margin-left: 20rpx;margin-bottom: 20rpx;border-radius: 50rpx;padding: 0 15rpx;">
			<image style="width: 60rpx;height: 60rpx;margin-right: 10rpx;"
				src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/bdbe8a78e0684bd19b69c42de745a590.png" />
			<text style="font-size: 24rpx;letter-spacing: 0.1em;">押金管理</text>
		</view>

		<!-- 订单列表数据 -->
		<view v-if="orderList.length" scroll-y="true" @scrolltolower="scrolltoBottomHandler"
			class="orderListWrapper-rich">
			<OrderItem v-for="(orderObj, idx) in orderList" :key="idx" :orderObj="orderObj"></OrderItem>
			<view class="be-end">已经到底了~</view>
		</view>

		<view v-if="!loading && !orderList.length" class="emptyOrderListWrapper-rich">
			<image class="empty-icon-rich"
				src="https://zuwuzuwebs.oss-cn-beijing.aliyuncs.com/jianbanMini/orderList/%E6%9A%82%E6%97%A0%E8%AE%A2%E5%8D%95%402x%20%281%29.png">
			</image>
			<text class="empty-title-rich">暂无{{ returnTxt() }}订单</text>
			<text class="empty-desc-rich">快去看看喜欢的商品吧</text>
			<view @click="goSeeHandler" class="see-btn-rich">去看看</view>
		</view>
		<u-modal v-model="showCountDown" class="my-count-down-modal" width="600rpx" border-radius="25"
			:title-style="{ color: 'white' }" :show-confirm-button="false">
			<view class="slot-content">
				<CircleCountDown @change="countDownChange" :timestamp="appid == 'KSG1704817633673' ? 10 : 15" />
				<view class="text-tip">
					订单账单正在生成中，请稍等，
					<br />
					实物在24小时内发货。
				</view>
			</view>
		</u-modal>

		<u-modal v-model="tixingqianyueSta" class="tixingqianyu-box-rich" width="500rpx" border-radius="25"
			:title-style="{ color: 'white' }" :show-confirm-button="false">
			<view class="tixingqianyue">
				<view class="tit1">温馨提示</view>
				<view class="tit3"> 实物在24小时内发货</view>
				<view class="tit4" @click="iKonw">我知道了</view>
			</view>
		</u-modal>

		<view class="bigMengceng" @click="closeMengceng" v-if="isWexinOpenSecondSign">
			<image class="openImg" src="./open.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	// 订单列表页面
	import CircleCountDown from '@/components/circleCountDown/CircleCountDown.vue';
	import VTabs from '../../components/v-tabs/v-tabs.vue';
	import {
		TABS,
		ALL_ORDER_ID,
		ALL_ORDER_TEXT,
		APP_APPID
	} from '../../utils/constant.js';
	import OrderItem from '../subassembly/orderItem/orderItem.vue';
	import {
		saveUserId,
	} from '@/utils';
	export default {
		data() {
			return {
				isChuDiJiaZaiSta: false,
				isHasOrderSta09: false, //循环所有的订单是否有09(已完结的单子),先熟押金管理入口
				isShowgDepositBtnStart: false,
				tixingqianyueSta: false,
				showCountDown: false,
				tabList: TABS, // 所有列表数据
				activeTab: 0, // 处于焦点状态下的订单分类，是个索引
				orderListApiRes: {}, // 订单列表/userOrderList接口所返回的数据
				pageNumber: 1,
				pageSize: 10,
				loading: true, // 请求页面数据中
				hasIdCardFlag: true, // 表示是否绑定了身份证，默认认为已经绑定了身份证，避免经常发生闪现
				topConfigObj: {}, // 用来判断是否需要显示支付押金和签约周期扣款,
				appid: APP_APPID,
				orderList11: [],
				total: 0,
				otherOperateRefreshSta: false, //其他操作要走refreshHandler接口的，则变为true
				isBackFormZfb: false, //传uid给后端，判断当前uid是否获取页面url
				zfbUid: '',
				zfbOrderId: '',
				newAntChainWithholdUid: '', //新蚂蚁链代扣---第一次签约url后返回拼接的uid
				newAntChainWithholdOrderId: '', //新蚂蚁链代扣---第一次签约url后返回拼接的newAntChainWithholdOrderId
				isBackNewZFbAntSta: false, //新蚂蚁链代扣---当前页的uid是否从第一次签约后返回的
				isWxBrowser: false,
				isWexinOpenSecondSign: false,
			};
		},
		components: {
			VTabs,
			CircleCountDown,
			OrderItem
		},
		onLoad(opt) {
			// console.log('所有的订单', this.orderList);
			// let isHasQinanyue = this.orderList.some(item => {item.status == '13'})
			//新蚂蚁连第一次签约成功后回跳到这个页面，拿到url后拼接的参数再次发起二次签约代扣
			let nowUrl = window.location.href;
			if (nowUrl.indexOf("type") != -1) {
				this.newAntChainWithholdUid = this.getZfbSignBackUrlParames().uid || ''
				this.newAntChainWithholdOrderId = this.getZfbSignBackUrlParames().orderId || ''
				if (this.newAntChainWithholdUid != '') {
					this.isBackNewZFbAntSta = true
					//取第二次签约的主题
					this.getAntSecondSignUrl(this.newAntChainWithholdOrderId)
				}
			}


			let nowUrl1 = window.location.href;
			// let nowUrl1 =
			// 'https://mobile.japalura.com/#/pagesMy/orderList/orderList?tab=all&uid=8f72cbf086a623ccb2854d60cf257873d83ddb657x3qoc4maavq&orderId=ZL202407167991450133583626241224';
			if (nowUrl1.indexOf("type") == -1 && nowUrl1.indexOf("uid") != -1) {
				this.zfbUid = this.getUrlCode().uid || ''
				this.zfbOrderId = this.getUrlCode().orderId || ''
				if (this.zfbUid && this.zfbOrderId) {
					saveUserId(this.zfbUid);
					// console.log('啦啦啦啦啦啦啦');
					this.isBackFormZfb = true //获取列表数据传的uid从url中取，而不是从this.$getUid中取
					this.zfbFace(this.zfbOrderId, this.zfbUid)
				}
			}



			this.orderListApiRes = {};
			this.activeTab = this.findTabIdxFromTabList(opt && opt.tab);
			this.fetchOrderList();
			this.eventId = this.$eventEmitter.subscribe('refreshOrderList', this.refreshHandler); // 监听是否需要刷新订单列表事件
			this.isShowDepositBtn()
			this.fetchUserHasBindIdCard();
			if (opt.isBuyOutOrSend == 2) {
				this.showCountDown = true;
			}
		},
		onUnload() {
			this.$eventEmitter.removeHandler('refreshOrderList', this.eventId);
		},
		// 监听页面的下拉刷新操作
		onPullDownRefresh() {
			this.refreshHandler(true);
		},
		onReachBottom() {
			this.scrolltoBottomHandler()
		},
		onShow() {
			this.judgeBrowserEnv()
			this.fetchOrderList();
			this.isChuDiJiaZaiSta = true


			let nowUrl1 = window.location.href;
			// let nowUrl1 =
			// 'https://mobile.japalura.com/#/pagesMy/orderList/orderList?tab=all&uid=8f72cbf086a623ccb2854d60cf257873d83ddb657x3qoc4maavq&orderId=ZL202407167991450133583626241224';
			if (nowUrl1.indexOf("type") == -1 && nowUrl1.indexOf("uid") != -1) {
				this.zfbUid = this.getUrlCode().uid || ''
				this.zfbOrderId = this.getUrlCode().orderId || ''
				if (this.zfbUid && this.zfbOrderId) {
					// console.log('啦啦啦啦啦啦啦');
					saveUserId(this.zfbUid);
					this.isBackFormZfb = true //获取列表数据传的uid从url中取，而不是从this.$getUid中取
					this.zfbFace(this.zfbOrderId, this.zfbUid)
				}
			}


		},
		computed: {
			// 加工过后订单列表数据，不管接口返回如何，一定能确保其数据类型是数组，使用方无需检测
			orderList: function() {
				const resObj = this.orderListApiRes || {};
				this.$forceUpdate()
				return this.orderList11
			},
			// 判断是否已经到最后一页了
			hasBeenEnd: function() {
				const totalPages = this.orderListApiRes?.pages; // 这里把初始值设置为2，是为了避免一开始就不请求（这样写不太好）
				return this.pageNumber > totalPages;
			}
		},
		methods: {
			//跳转到支付押金的页面
			goPayDeposit() {
				this.$onTo("/pagesMy/depositRecharge/depositRecharge")
			},
			//判断押金的按钮是否显示
			isShowDepositBtn() {
				return this.$request(
					"order/mall/api/order/queryOrderPaySignInfo", {},
					"GET",
					true
				).then((res) => {
					if (res.businessSuccess || res.success) {
						this.isShowgDepositBtnStart = res.data.showDepositIcon
						if (res.data.showDepositIcon) {
							//写个方法结合所有订单的状态来判断是否显示按钮
						}
					}
					// const resData = res.data || {}
					// this.topConfigObj = resData
				})
			},



			//关闭提醒蒙层
			closeMengceng() {
				this.isWexinOpenSecondSign = false
			},
			//判断当前浏览器环境 在onshow中调用
			judgeBrowserEnv() {
				let ua = navigator.userAgent.toLowerCase(); // 这里将所有字母转小写
				// let isWxBrowser = ua.indexOf('micromessenger') !== -1 //微信环境
				if (ua.indexOf('micromessenger') !== -1) {
					this.isWxBrowser = true
				} else {
					this.isWxBrowser = false
				}
			},
			//解析window.location.href的参数
			getZfbSignBackUrlParames() {
				let str = window.location.href;
				// let str =
				// 'https://run.nbqlkj.com/#/pagesMy/orderList/orderList?tsignType=SIGN&tsignCode=0&tsignDes=%E7%AD%BE%E7%BD%B2%E6%88%90%E5%8A%9F&tab=all&uid=28e86b182e7fcba67a2c06dc5b85246cb2dd4773dp7tx9sd4xki&orderId=MALL202406037834703404571033601970&type=1'
				if (str.indexOf("type") != -1) {
					let obj = {};
					let arr1 = str.split("?");
					let arr2 = arr1[1].split("&");
					for (let i = 0; i < arr2.length; i++) {
						let res = arr2[i].split("=");
						obj[res[0]] = res[1];
					}
					// console.log('解析orderList页面url参数', obj);
					return obj;
				}
			},
			//新蚂蚁连第二次代扣签约链接
			getAntSecondSignUrl(signOrderId) {
				this.$request(`order/mall/liteUserOrders/getOrderWithholdSign?orderId=${signOrderId}`, {}, 'get', false,
					true).then((res) => {
					if (res.businessSuccess || res.success) {
						this.goJumpZFBWithhold(decodeURIComponent(res.data.url))
					}
					// else {
					// 	// uni.showToast({
					// 	// 	icon: 'none',
					// 	// 	title: res.errorMessage || res.msg || '签约异常，请联系客服处理！',
					// 	// 	duration: 2000
					// 	// });
					// }
				});
			},
			//唤醒支付宝的代扣签约
			goJumpZFBWithhold(urls) {
				let jumpUrl = `https://openapi.alipay.com/gateway.do?${urls}`
				let isIosEnv = uni.getSystemInfoSync().platform
				// window.location.href = jumpUrl
				if (this.isWxBrowser) {
					//在微信环境中，打开蒙层，提示在微信中打开
					this.isWexinOpenSecondSign = true
					return
				} else {
					this.isWexinOpenSecondSign = false
					if (isIosEnv == 'ios') {
						uni.showLoading({
							title: "加载中"
						})
						let timer1 = null
						timer1 = setTimeout(() => {
							uni.hideLoading()
							window.open(jumpUrl, "_blank");
							clearTimeout(timer1);
							timer1 = null
						}, 100); // 延迟0.1秒
					} else {
						window.open(jumpUrl, "_blank");
					}
				}
			},

			getUrlCode() {
				var url = window.location.href
				// var url =
				// 'https://mobile.japalura.com/#/pagesMy/orderList/orderList?tab=all&uid=8f72cbf086a623ccb2854d60cf257873d83ddb657x3qoc4maavq&orderId=ZL202407167991450133583626241224'
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				// console.log('嘎嘎嘎嘎嘻嘻嘻',theRequest);
				return theRequest;
			},
			//支付宝刷脸返回后走的回调
			zfbFace(orderId, uid) {
				uni.showToast({
					title: '走人脸回调了',
					icon: 'none',
					duration: 2000
				});
				uni.showLoading({
					title: '加载中'
				});
				let queryData = {
					certifyId: '',
					passed: true,
					orderId: orderId,
					uid: uid,
					// orderId: 'ZL202407167991450133583626241224'
				}
				this.$request("order/mall/api/order/faceAuthInitAsync", queryData, "get")
					.then(() => {

						uni.hideLoading();
						uni.showToast({
							title: '走人脸接口回跳走完了',
							icon: 'none',
							duration: 10000
						});
						let timer1 = null
						timer1 = setTimeout(() => {
							this.fetchOrderList()
							clearTimeout(timer1);
							timer1 = null
						}, 50); // 延迟0.1秒
					})
			},
			iKonw() {
				this.tixingqianyueSta = false
				uni.reLaunch({
					url: '/pagesMy/orderList/orderList',
				});
			},
			countDownChange(time) {
				console.log('---倒计时---', time);
				if (time === 0) {
					this.showCountDown = false;
					console.log('---该弹出签约的提示框了---');
					if (this.appid != 'KSG1704817633673') {
						this.qiantanSHow()
					}
				}
			},
			qiantanSHow() {
				this.tixingqianyueSta = true
			},


			/**
			 * 获取时间的YYYYMMDD格式
			 * @param {Number} type : 0表示yymmdd，1表示yy-mm-dd，2表示yy年mm月dd日
			 * @returns
			 */
			getDateYYMMDD(type = 0, dateObj) {
				const date = dateObj || new Date();
				const year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (month < 10) month = `0${month}`;

				let day = date.getDate();
				if (day < 10) day = `0${day}`;

				if (type == 0) {
					return `${year}${month}${day}`;
				} else if (type == 1) {
					return `${year}-${month}-${day}`;
				} else if (type == 2) {
					return `${year}年${month}月${day}日`;
				}
			},

			/**
			 * 判断用户是否上传身份证
			 */
			fetchUserHasBindIdCard() {
				return this.$request('member/mall/userCertification/getByUid', {}, 'GET', true).then((res) => {
					const resData = res.data || {};
					const {
						idCardBackUrl,
						idCardFrontUrl,
						limitDate
					} = resData;
					const nowYYYYMMDD = this.getDateYYMMDD();
					if (!idCardBackUrl || !idCardFrontUrl || !limitDate || nowYYYYMMDD > limitDate) {
						// 不存在正反面或者已过期
						this.hasIdCardFlag = false;
					}
				});
			},

			/**
			 * 刷新处理
			 */
			refreshHandler(isPullDownRefresh) {
				this.otherOperateRefreshSta = true
				console.log('刷新处理', isPullDownRefresh);
				this.resetHandler();
				this.fetchOrderList(isPullDownRefresh);
			},

			/**
			 * 加载订单列表数据
			 */
			fetchOrderList(isPullDown) {
				// this.orderListApiRes = {}
				const stopPulldownHandler = () => {
					isPullDown && uni.stopPullDownRefresh();
				};

				console.log('已经到底了' + this.pageNumber);
				if (this.hasBeenEnd) {
					// 已经到底部了，那么直接返回
					stopPulldownHandler();
					return;
				}

				const postObj = {
					uid: this.isBackFormZfb ? this.zfbUid : this.isBackNewZFbAntSta ? this.newAntChainWithholdUid :
						this.$getUid(),
					status: this.findTabValueByIdx(),
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				};
				if (postObj.status === ALL_ORDER_ID) delete postObj['status']; // 全部订单的话，删除status字段，非必填
				const cnMap = {
					uid: '用户ID',
					status: '订单状态',
					pageNumber: '页数',
					pageSize: '页码'
				};
				const {
					postData,
					pass
				} = this.$postDataGuard(postObj, cnMap);
				if (!pass) {
					// 说明参数校验失败
					stopPulldownHandler();
					return;
				}

				this.loading = true;

				this.$request('order/mall/liteUserOrders/userOrderList', postData, 'POST', false, true)
					.then((res) => {
						const resData = res.data || {};
						resData.records = this.compositeOrderList(resData);
						this.orderListApiRes = resData;
						// console.log('所有的订单', res.data.records);
						// this.isHasOrderSta09 = res.data.records.some(item => item.status == '04' || item.status ==
						// 	'09' || item.status == '13')
						// console.log('yajin--', this.isHasOrderSta09);
					})
					.finally(() => {
						this.loading = false;
						stopPulldownHandler();
					});
			},

			/**
			 * 合成新的订单列表数据
			 * @param {newV} 新请求到的接口数据
			 */
			compositeOrderList(newV) {
				if (this.otherOperateRefreshSta) {
					this.orderList11 = []
				}
				if (this.isChuDiJiaZaiSta) {
					this.orderList11 = []
				}
				const newOrderList = newV?.records || [];
				this.orderList11 = this.orderList11.concat(newV?.records || [])
				this.otherOperateRefreshSta = false //恢复成false
				return newOrderList;


			},

			// 初始化数据
			resetHandler() {
				this.pageNumber = 1;
				this.orderListApiRes = {};
			},

			/**
			 * 点击tab栏的时候触发
			 */
			changeTab(idx) {
				this.orderList11 = []
				this.resetHandler();
				this.activeTab = idx;
				this.fetchOrderList();
			},

			/**
			 * 根据分类的枚举值找出对应的索引
			 * @param {string} atab : 处于焦点的状态栏英文
			 */
			findTabIdxFromTabList(atab) {
				console.log(777, atab);
				const idx = TABS.findIndex((obj) => obj.status == atab);
				if (idx === -1) return 0; // 找不到，则默认所有
				return idx;
			},

			/**
			 * 找出当前菜单的枚举值
			 */
			findTabValueByIdx() {
				const tabObj = TABS[this.activeTab] || {};
				return tabObj.id;
			},

			/**
			 *  根据当前菜单的索引值找出其中文
			 */
			findTabTextByIdx() {
				const tabObj = TABS[this.activeTab] || {};
				return tabObj.text;
			},

			/**
			 * 返回文案
			 */
			returnTxt() {
				const txt = this.findTabTextByIdx();
				return txt == ALL_ORDER_TEXT ? '' : txt;
			},

			/**
			 * 监听点击去查看
			 */
			goSeeHandler() {
				this.$onTo('/pages/classified-rich/classified-rich', true);
			},

			/**
			 * 监听滑动到底部
			 */
			scrolltoBottomHandler() {
				console.log('监听上拉加载');
				if (this.hasBeenEnd) {
					return;
				}
				this.isChuDiJiaZaiSta = false
				this.pageNumber = this.pageNumber + 1;
				this.fetchOrderList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bigMengceng {
		display: flex;
		justify-content: flex-end;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		z-index: 999999;
		background: rgba(76, 76, 76, 0.9);

		.openImg {
			width: 240rpx;
			height: 160rpx;
			display: block;
			margin: 20rpx 30rpx 0 0;
		}
	}

	.pageWrapper-rich {
		overflow: hidden;
		background: #f5f5f8;
		padding-bottom: 20rpx;
	}

	.topTabs-rich {
		margin-bottom: 20rpx;
	}

	.text-tip {
		text-align: center;
		margin: 30rpx 0;
	}

	.tixingqianyue {
		text-align: center;

		.tit1 {
			margin: 30rpx 0 50rpx 0;
			font-weight: 600;
			font-size: 34rpx;
			margin-top: -30rpx;
		}

		.tit3 {
			margin-bottom: 50rpx;
		}

		.tit4 {
			border-radius: 50rpx;
			background-color: #666;
			width: max-content;
			letter-spacing: 0.1em;
			margin-bottom: 20rpx;
			color: #ffffff;
			font-size: 30rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			padding: 25rpx 80rpx;
		}
	}

	.emptyOrderListWrapper-rich {
		background: #fff;
		padding-top: 160rpx;
		box-sizing: border-box;
		min-height: calc(100vh - 70rpx - 20rpx);
		display: flex;
		flex-direction: column;
		align-items: center;


		.empty-icon-rich {

			display: block;
			margin-bottom: 48rpx;
			width: 230rpx;
			height: 266rpx;
		}

		.empty-title-rich {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}

		.empty-desc-rich {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666;
			line-height: 33rpx;
			margin-bottom: 30rpx;
		}

		.see-btn-rich {
			width: 138rpx;
			height: 56rpx;
			@include global-background-color-red();
			border-radius: 43rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.orderListWrapper-rich {
		box-sizing: border-box;
		padding: 0 20rpx 30rpx;
	}

	.be-end {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999;
	}

	/deep/.my-count-down-modal {
		.u-mask {
			background-color: rgba(255, 255, 255, 0.5) !important;
			filter: blur(6px);
			backdrop-filter: blur(6px);
		}

		.u-drawer-content {
			overflow: visible !important;
			margin-top: -20%;

			.u-mode-center-box {
				background-color: transparent;
				height: 100rpx !important;
				// background-color: rgba(0, 0, 0, 0.95) !important;
				// border: 8rpx solid black;
				overflow: visible !important;
				// box-shadow: 18rpx 18rpx 30rpx rgba(0, 0, 0, 0.2), -18rpx -18rpx 30rpx rgba(255, 255, 255, 1);
				transition: all 0.2s ease-out;
			}

			.uni-scroll-view {
				overflow: visible !important;
			}
		}

		.u-model {
			margin-top: 10rpx;
			overflow: visible !important;
			background-color: transparent;

			.u-model__title {
				display: none;
				white-space: pre-wrap;
				font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
			}

			.u-model__content {
				text-align: center;

				.slot-content {
					.my-count-down {
						margin-top: -3%;

						.u-countdown-item {
							background-color: transparent !important;

							.u-countdown-time {
								font-size: 75rpx !important;
								color: #fff !important;
							}
						}
					}

					.text-tip {
						// width: 270%;
						display: block;
						color: #282828;
						margin-top: 10%;
						font-size: 30rpx;
						font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
						// transform: translateX(-28%);
						font-weight: bold;
					}

					.u-countdown-colon {
						color: #fff !important;
						font-size: 40rpx !important;
					}
				}
			}
		}
	}

	/deep/.tixingqianyu-box-rich {
		.tixingqianyue {
			color: #ffffff;

			.tit1 {
				margin: 30rpx 0 50rpx 0;
				font-weight: 600;
				font-size: 34rpx;
			}

			.tit3 {
				margin-bottom: 50rpx;
			}

			.tit4 {
				width: max-content;
				letter-spacing: 0.1em;
				padding: 25rpx 80rpx;
				font-size: 30rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				border-radius: 50rpx;
				background-color: #666;

			}
		}

		.u-mask {
			background-color: rgba(255, 255, 255, 0.5) !important;
			filter: blur(6px);
			backdrop-filter: blur(6px);
		}

		.u-drawer-content {
			overflow: visible !important;
			margin-top: -20%;

			.u-mode-center-box {
				height: 400rpx !important;
				background-color: rgba(0, 0, 0, 0.9) !important;
				// border: 8rpx solid black;
				overflow: visible !important;
				box-shadow: 18rpx 18rpx 30rpx rgba(0, 0, 0, 0.2), -18rpx -18rpx 30rpx rgba(255, 255, 255, 1);
				transition: all 0.2s ease-out;
			}

			.uni-scroll-view {
				overflow: visible !important;
			}
		}


		.u-model {
			margin-top: 10rpx;
			overflow: visible !important;
			background-color: transparent;

			.u-model__title {
				display: none;
				white-space: pre-wrap;
				font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
			}

			.u-model__content {
				text-align: center;
			}
		}
	}
</style>